/**
`useRef`  是 React 中的一个 Hook，主要用于访问 DOM 元素或保存可变的值，而不引起组件的重新渲染。
  1. 基本概念

  - 引用（Ref）： `useRef`  创建一个可变的引用对象，该对象的  `.current`  属性可以存储任何值，包括 DOM 元素、组件实例或其他数据。
  - 不引起重新渲染：更新  `useRef`  的值不会导致组件重新渲染，这使得它非常适合存储不需要在渲染中使用的值。

  2. 使用方式
  `useRef`  的基本用法如下：
  import React, { useRef } from 'react';

  const MyComponent = () => {
    const inputRef = useRef(null); // 创建一个 ref

    const focusInput = () => {
      if (inputRef.current) {
        inputRef.current.focus(); // 访问 DOM 元素并调用 focus 方法
      }
    };

    return (
      <div>
        <input ref={inputRef} type="text" />
        <button onClick={focusInput}>Focus the Input</button>
      </div>
    );
  };
  3. 常见用法
  - 访问 DOM 元素：通过  `useRef`  可以直接访问和操作 DOM 元素，例如获取输入框的值、设置焦点等。
    
  - 存储可变值： `useRef`  可以存储不需要引起重新渲染的可变值，例如定时器 ID、动画状态等。
  const TimerComponent = () => {
    const timerRef = useRef(null);

    const startTimer = () => {
      timerRef.current = setInterval(() => {
        console.log('Timer is running');
      }, 1000);
    };

    const stopTimer = () => {
      clearInterval(timerRef.current);
    };

    return (
      <div>
        <button onClick={startTimer}>Start Timer</button>
        <button onClick={stopTimer}>Stop Timer</button>
      </div>
    );
  };
  4. 注意事项
  - 初始值： `useRef`  的初始值是在组件首次渲染时设置的，之后的更新不会影响组件的渲染。
  - 与  `useState`  的区别： `useRef`  更新不会引起组件重新渲染，而  `useState`  更新会导致组件重新渲染。选择使用哪一个取决于具体需求。

  5. 总结
  `useRef`  是一个非常有用的 Hook，主要用于访问 DOM 元素和存储可变值。它允许开发者直接与 DOM 进行交互，同时避免不必要的重新渲染。合理使用  `useRef`  可以提高组件的性能和可维护性，尤其是在需要频繁操作 DOM 或存储临时状态的场景中。
 */
import React, { memo, useRef, useCallback, useState } from 'react'

// let obj = null

const App = memo(() => {
  const [count, setCount] = useState(0)
  const inputRef = useRef(null)
  const titleRef = useRef(null)

  function showTitleDom() {
    console.log(titleRef.current)
    inputRef.current.focus()
  }

  const counterRef = useRef()
  // console.log(obj === counterRef)
  // obj = counterRef
  counterRef.current = count
  const increment = useCallback(() => {
    setCount(counterRef.current + 1)
  }, [])
  
  return (
    <div>
      <h2 ref={titleRef}>01_useRef绑定DOM</h2>
      <input type="text" ref={inputRef} />
      <button onClick={showTitleDom}>查看title的dom</button>

      <h2>02_useRef绑定值-解决闭包陷阱</h2>
      <button onClick={e => setCount(count+1)}>+1({count})</button>
      <button onClick={increment}>+1({count})</button>
    </div>
  )
})

export default App